<template>
<div class="container">
    <div>{{obj.name}}</div>
    <div>{{obj.age}}</div>
    <button @click="useName">修改名字</button>
</div>  
</template>

<script>
import { reactive } from 'vue'

export default {
name:'App',
setup() {
    //普通数据
    // const obj={
    //     name:'张三',
    //     age:18
    // }
    
    // 响应式数据的函数 reactive：通常用来定义响应式数据
    const obj = reactive({
        name:'张三',
        age:18
    })
    const useName=()=>{{
     obj.name='王麻子'
    }}

    return {obj,useName}
},
}
</script>

<style>

</style>